var path = require('path'); //导入node.js中专门操作路径的模块
var htmlWebPlugin = require('html-webpack-plugin');
var VueLoaderPlugin = require("vue-loader/lib/plugin");

//作用把 src 下面的 index.html ，在跟目录中生成一份，因为根目录中自动预览index.html
var HWP =  new htmlWebPlugin({
  template:path.join(__dirname,'./src/index.html'), //指定要用到的模板文件
  filename:'index.html'    //指定生成的文件的名称，该文件存在于内存中，在目录中不显示
});

module.exports = {
  /*
  两个参数 development开发环境 production生产环境
  开发环境不会使文件压缩混淆
  * */
  mode:"development",

  entry:path.join(__dirname,"./src/index.js"), //打包入口文件的路径
  output: {
    path:path.join(__dirname,"./dist"), // 输出文件的存放路径
    filename:"bundle.js"  //输出文件的名称
  },

  plugins: [HWP,new VueLoaderPlugin()],

  module: {  //模块
    rules:[  //规则
      {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},
      {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
      {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
      {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=128047'},
      {test:/\.js$/,use:"babel-loader", exclude:/node_modules/},
      {test:/\.vue$/,use:"vue-loader"},
    ]
  },

};
